<template>
  <el-dialog width="940px" :visible="showSetListDialog" title="货道设置" @close="$emit('update:showSetListDialog', false)">
    <!-- 智能排序 -->
    <el-dialog
      width="858px"
      title="智能排货"
      :visible.sync="innerVisible"
      append-to-body
    >
      <!-- 样式 -->
      <div class="styleBody">
        <div class="tips">该区域属于{{ name }}商圈适合销售一下商品：</div>
        <el-row :gutter="0">
          <el-col v-for="(item,index) in skuList" :key="index" :span="5">
            <div class="item" style="width: 134px;height: 150px;">
              <div class="sku space">
                <img :src="item.image" alt="">
                <div class="name">{{ item.skuName }}</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <template v-slot:footer>
        <el-row type="flex" justify="center">
          <el-button type="warning" @click="takeAdvice">采纳建议</el-button>
        </el-row>
      </template>
    </el-dialog>
    <div class="channel-basic">
      <span>货道行数：{{ setTypeList.vmRow }}</span>
      <span>货道列数：{{ setTypeList.vmCol }}</span>
      <span class="capacity">货道容量（个）：{{ setTypeList.channelMaxCapacity }}</span>
      <el-button size="small" type="primary" @click="innerDialog(setTypeList)">智能排货</el-button>
    </div>
    <el-scrollbar ref="views" style="width: 814px;height: 384px;margin: 0 auto;">
      <div :class="[{transformx:btnNum === 1}]">
        <el-row v-for="(item,index) in newDetailList" :key="index" type="flex" :gutter="15" style="margin-bottom:20px">
          <el-col v-for="(obj,ind) in item" :key="ind" :span="12">
            <div class="items">
              <div class="code">{{ obj.channelCode }}</div>
              <div class="sku">
                <img v-if="obj.sku" :src="obj.sku.skuImage" alt="">
                <img v-else src="~@/assets/common/noLoad.png" alt="">
                <div class="name">{{ obj.sku?obj.sku.skuName:'暂无商品' }}</div>
              </div>
              <div>
                <el-button type="text" @click="addGoods(obj)">添加</el-button>
                <el-button type="text" :style="{color:(!obj.sku? '#ffdada':'red')}" :disabled="!obj.sku" @click="delConfiguration(obj)">删除</el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-scrollbar>
    <div v-if="setTypeList.channelMaxCapacity >5">
      <i class="el-icon-arrow-left" :class="{disabled:btnNum === 0}" @click="btnLeft" />
      <i class="el-icon-arrow-right" :class="{disabled:btnNum === 1}" @click="btnRight" />
    </div>
    <template v-slot:footer>
      <el-row type="flex" justify="center">
        <el-button type="warning" @click="btnOK">确认</el-button>
      </el-row>
    </template>

    <!-- 添加商品 -->
    <el-dialog
      v-if="showGoodsDialog"
      destroy-on-close
      width="858px"
      title="选择商品"
      :visible.sync="showGoodsDialog"
      append-to-body
      @close="btnCancel"
    >
      <!-- 样式 -->
      <search label="商品名称：" @searchInnerCode="searchFn" />
      <div class="styleBody">
        <el-row :gutter="0">
          <el-col v-for="(item,index) in GoodsList" :key="index" :span="5">
            <div class="item" style="width: 134px;height: 150px;" @click="changeFn(item,index)">
              <div class="sku space">
                <img v-if="index === selected" src="@/assets/common/right.png" alt="" class="selected">
                <img :src="item.skuImage" alt="">
                <div class="name">{{ item.skuName }}</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <template v-slot:footer>
        <el-row type="flex" justify="center">
          <el-button type="warning" @click="confirm">确认</el-button>
        </el-row>
      </template>
      <el-pagination
        layout="prev, next"
        :current-page="+page.pageIndex"
        :page-size="+page.pageSize"
        :page-count="+totalPage"
        hide-on-single-page
        @current-change="changePage"
      />
    </el-dialog>
  </el-dialog>
</template>

<script>
import { changeConfiguration, getGoodsList } from '@/api/equipment'
import { getBusinessType, getbusinessTop } from '@/api/bussness'
import search from '@/components/equipment/search.vue'
export default {
  components: { search },
  props: {
    showSetListDialog: {
      type: Boolean,
      default: false
    },
    setTypeList: {
      type: Object,
      required: true
    },
    detailList: {
      type: Array,
      required: true
    },
    innerCode: {
      type: String,
      required: true
    },
    businessId: {
      type: Number,
      required: true
    }

  },
  data() {
    return {
      background: '~@/assets/common/noLoad.png',
      btnNum: 0,
      innerVisible: false,
      showGoodsDialog: false,
      name: '',
      skuList: [],
      image: [],
      skuName: [],
      skuId: [],
      page: {
        pageIndex: 1,
        pageSize: 10,
        skuName: null
      },
      GoodsList: [],
      totalPage: 0,
      selected: null,
      skuItem: {},
      addGood: {},
      changeItem: {}
    }
  },
  computed: {
    newDetailList() {
      const arr = this.detailList.reduce((pre, cur) => {
        const index = cur.channelCode[0] - 1
        if (pre[index] instanceof Array) {
          pre[index].push(cur)
        } else {
          pre[index] = []
          pre[index].push(cur)
        }
        return pre
      }, [])
      return arr
    }
  },
  methods: {
    delConfiguration(obj) {
      this.detailList.forEach(item => {
        if (obj.channelCode === item.channelCode) {
          item.skuId = '0'
        }
      })
      obj.sku = null
    },
    async btnOK() {
      console.log(this.formData)
      await changeConfiguration(this.detailList, this.innerCode)
      this.$emit('update:showSetListDialog', false)
      this.$emit('updateList')
    },
    btnLeft() {
      this.btnNum = 0
    },
    btnRight() {
      this.btnNum = 1
    },
    async innerDialog() {
      this.innerVisible = true
      const data = await getBusinessType('name', this.businessId)
      const res = await getbusinessTop(this.businessId)
      this.skuList = res.data
      this.name = data.data
    },
    takeAdvice() {
      console.log(this.newDetailList)
      this.skuList.forEach(item => {
        console.log(item)
        this.image.push(item.image)
        this.skuName.push(item.skuName)
        this.skuId.push(item.skuId)
        // console.log('image', this.image)
      })
      this.newDetailList[0].forEach((obj, index) => {
        if (obj.sku === null) {
          obj.sku = {}
        }
        obj.sku.skuImage = this.image[index]
        obj.sku.skuName = this.skuName[index]
        obj.skuId = this.skuId[index]
      })
      this.innerVisible = false
    },
    async addGoods(obj) {
      this.addGood = obj
      const data = await getGoodsList(this.page)
      console.log(data)
      this.GoodsList = data.data.currentPageRecords
      this.page.total = data.data.totalCount
      this.totalPage = data.data.totalPage
      this.showGoodsDialog = true
    },
    changePage(newPage) {
      this.page.pageIndex = newPage
      this.selected = null
      this.addGoods()
    },
    async searchFn(item) {
      this.page.skuName = item
      const data = await getGoodsList(this.page)
      this.totalPage = data.data.totalPage
      this.GoodsList = data.data.currentPageRecords
    },
    async btnCancel() {
      this.page = {
        pageIndex: 1,
        pageSize: 10,
        skuName: null
      }
      this.showGoodsDialog = false
      const data = await getGoodsList(this.page)
      console.log(data)
      this.GoodsList = data.data.currentPageRecords
    },
    changeFn(item, index) {
      this.changeItem = item
      this.selected = index
      this.skuItem = item
    },
    confirm() {
      this.newDetailList.forEach((item) => {
        item.forEach(obj => {
          if (obj.channelCode === this.addGood.channelCode) {
            if (obj.sku === null) {
              obj.sku = {}
            }
            obj.sku.skuImage = this.changeItem.skuImage
            obj.sku.skuName = this.changeItem.skuName
            obj.skuId = this.changeItem.skuId
          }
        })
      })
      this.showGoodsDialog = false
      this.selected = null
    }

  }
}
</script>

<style lang="scss">
.el-icon-arrow-left,.el-icon-arrow-right{
  font-size: 50px !important;
}
.el-dialog{
  width: 940px;
  border-radius: 10px;
}
.el-dialog__title{
  line-height: 22px;
    font-size: 16px;
    font-weight: 600;
}
.el-col-5{
  width: 20%;
}
.space{
  overflow: hidden;
  margin-bottom: 20px;
  clear:left;
  display: block;
}
.channel-basic{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f3f6fb;
  height: 56px;
  margin-bottom: 20px;
  span {
    margin-left: 50px;
  }
  .capacity{
    flex: 1;
  }
  .el-button{
    margin-right: 20px;
    span {
      margin-left: 0;
      font-size: 14px;
    }
  }
  .scrollMenuBox {
    height: 10px;
    width: 100px;
    border: 1px solid red;
}
}
.item{
  position: relative;
  width: 150px;
  height: 180px;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 6%);
  background: #fff;
  .code{
    position: absolute;
    top: 10px;
    left: 0;
    width: 43px;
    height: 23px;
    line-height: 23px;
    background: #829bed;
    border-radius: 0 10px 10px 0;
    font-size: 12px;
    color: #fff;
  }
}
.el-scrollbar__wrap{
  overflow-x: hidden;
}
.sku{
  height: 135px;
  padding-top: 16px;
  background-color: #f6f7fb;
  border-radius: 4px;
  img{
    display: inline-block;
    width: 84px;
    height: 78px;
    margin-bottom: 10px;
  }
  .name{
    padding: 0 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.el-icon-arrow-left{
  position: absolute;
    top: 50%;
    left: 0;
    font-size: 50px;
    cursor: pointer;
}
.el-icon-arrow-right{
  position: absolute;
    top: 50%;
    right: 0;
    font-size: 50px;
    cursor: pointer;
}
.transformx{
  transform: translate(-100%);
}
.transformX{
  transform: translate(100%);
}
.disabled{
  color: #d8dde3;
    cursor: auto;
}
.is-horizontal{
  display: none;
}
.styleBody{
  width: 750px;
  margin: 0 auto;
    .tips{
      margin-bottom: 16px;
    }
}

.selected{
  position: absolute;
  top: 0;
  left: 0;
  width: 36px !important;
  height: 36px !important;
}
</style>
